<template>
  <el-tooltip effect="light" :content="`${nodeData.agvName}`" placement="top">
    <div class="agv-container">
      <img class="agv-bg-img" src="@/assets/images/agv_bg.png" />
      <img class="agv-img" :src="`${imgUrl}${nodeData.url}`" />
    </div>
  </el-tooltip>
</template>

<script setup lang="ts" name="nodeAgv">
import { ref, onMounted, inject } from "vue";
import { Node } from "@antv/x6";
const imgUrl = import.meta.env.VITE_GLOB_IMG_URL;

const getNode: Function | undefined = inject<Function>("getNode");
const node = getNode?.() as Node;
const nodeData = ref(node?.getData() || {});
onMounted(() => {
  console.log("agv小车数据：", nodeData.value);
  // 监听数据改变
  node.on("change:data", ({ current }) => {
    nodeData.value = current;
  });
  node.on("change:showAGV", ({ current, cell }) => {
    cell.setVisible(current)
  });
});
</script>
<style scoped lang="scss">
@keyframes breathe {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.agv-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transform: rotate(90deg);

  .agv-bg-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    animation: breathe 1.5s infinite ease-in-out;
  }

  .agv-img {
    width: 21px;
    height: 28px;
  }
}
</style>
